<%--
  Created by IntelliJ IDEA.
  User: 雪峰
  Date: 2016/5/7
  Time: 19:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>工作年限与工资</title>
    <jsp:include page="/common/header.jsp"/>
    <!-- 这里用requirejs来做模块加载器 -->
    <script src="http://requirejs.org/docs/release/2.1.20/minified/require.js"></script>
    <!-- Chartx图表库文件引入，这里已1.9.21的cdn版本为例 -->
    <script src="http://g.tbcdn.cn/thx/charts/1.9.51/chartx/index-min.js"></script>
</head>
<body>
<jsp:include page="/common/navbar.jsp"/>
<div id="allTest" style="width:600px;height:300px;"></div>
<script>
    //chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组，
    //第一行是表头。
    var data = [
        ["xfield", "技术", "市场与销售", "运营", "产品", "设计", "职能"],
        ["1年以下", 7, 7.069, 6, 7.176, 8.575, 5.025],
        ["2 - 3年", 13.53, 8.646, 10.04, 13.581, 9.665, 7.665],
        ["4 - 5年", 20.708, 10.733, 11.666, 18.191, 14.221, 9],
        ["6 - 7年", 30, 20, 15, 22, 20, 23],
        ["8年以上", 45, 25, 30, 30, 25, 23]
    ];

    //chart的配置信息，所有的图表都可以极简到只需要配置xAxis，yAxis的字段
    var options = {
        yAxis: {
            field: ["技术", "市场与销售", "运营", "产品", "设计", "职能"],
            label: "年薪（万）"
        },
        xAxis: {
            field: "xfield",
            label: "工作年限"
        },
        legend: {
            tips: {
                enabled: true,
                content: function (e) {

                }
            }
        }
    };
    //Chartx.line开始初始化chart实例
    var chartx = Chartx.line("allTest", data, options).then(function (chart) {
    });
</script>
</body>
</html>
